<template>
  <a-layout-content>
    <back-bar-header text="账号中心"></back-bar-header>
    <a-layout
      class="message-container"
      :style="{ height: `${clientHeight - 188}px` }"
    >
      <a-layout-sider class="sider-menu">
        <a-menu v-model="noticeType" style="width: 200px;" mode="vertical">
          <a-menu-item :key="0"
            ><router-link to="/user/infos">个人信息</router-link></a-menu-item
          >
          <a-menu-item :key="1"
            ><router-link to="/user/security-settings">账户安全</router-link>
          </a-menu-item>
          <a-menu-item :key="2">
            <router-link to="/user/messages-settings"
              >系统/消息设置
            </router-link></a-menu-item
          >
        </a-menu>
      </a-layout-sider>
      <a-layout-content
        class="self-info-content"
        style="background: #fff; margin-right: 0;"
      >
        <span class="message-settings">系统/消息设置</span>
        <a-divider></a-divider>
        <div class="settings-option-row">
          <div style="width: 300px;">
            <div class="settings-top">消息设置</div>
            <div class="settings-bottom">{{ `${'接受所有消息'}` }}</div>
          </div>
          <a-select
            :value="noticeReceiveLevel"
            style="width: 120px;"
            @change="handleChangeNoticeReceiveLevel"
          >
            <template v-for="obj in noticeReceiveLevelList">
              <a-select-option :key="obj.level" :value="obj.level">{{
                obj.name
              }}</a-select-option>
            </template>
          </a-select>
        </div>
        <a-divider style="margin: 0 16px;"></a-divider>
        <div class="settings-option-row">
          <div style="width: 300px;">
            <div class="settings-top">二次确认设置</div>
            <div class="settings-bottom">数据视图中删除节点开启要二次确认</div>
          </div>
          <a-switch
            :checked="nodeDeletionSecondaryConfirmation"
            @change="handleChangeNodeDeletionSecondaryConfirmation"
          ></a-switch>
        </div>
        <a-divider style="margin: 0 16px;"></a-divider>
      </a-layout-content>
    </a-layout>
  </a-layout-content>
</template>

<script lang="ts">
import {
  queryNoticeReceiveLevel,
  getUserConfig,
  updateNodeDeletionSecondaryConfirmation,
  updateNoticeReceiveLevel,
} from '@/api/user'
import { Component, Vue } from 'vue-property-decorator'
import BackBarHeader from '@/components/home/BackBarHeader.vue'

@Component({
  components: {
    BackBarHeader,
  },
})
export default class PersonalInformationView extends Vue {
  private form: any
  private noticeType: Array<number> = [2]
  private clientHeight: number = document.body.clientHeight
  private noticeReceiveLevelList: any = []
  private noticeReceiveLevel: number = 1
  private nodeDeletionSecondaryConfirmation: boolean = true

  created() {
    this.getUserInfo()
    this.getNoticeReceiveLevel()
  }

  mounted() {
    window.addEventListener('resize', () => {
      this.clientHeight = document.body.clientHeight
    })
  }

  // 修改接受信息相关
  public async handleChangeNoticeReceiveLevel(value: any) {
    const result = await updateNoticeReceiveLevel({
      data: { noticeReceiveLevel: value },
    })
    if (result.data.code === 100) {
      this.$message.success('消息设置成功')
      this.noticeReceiveLevel = value
    } else {
      this.$message.error('消息设置失败')
    }
  }

  // 修改删除节点二次确认
  public async handleChangeNodeDeletionSecondaryConfirmation(checked: any) {
    const result = await updateNodeDeletionSecondaryConfirmation({
      data: {
        nodeDeletionSecondaryConfirmation: checked ? 1 : 0,
      },
    })
    if (result.data.code === 100) {
      this.$message.success('二次确认设置成功')
      this.nodeDeletionSecondaryConfirmation = checked
    } else {
      this.$message.error('二次确认设置失败')
    }
  }

  public async getUserInfo() {
    const result = await getUserConfig()
    const userInfo = result.data.result
    this.noticeReceiveLevel = userInfo.noticeReceiveLevel
    this.nodeDeletionSecondaryConfirmation =
      userInfo.nodeDeletionSecondaryConfirmation === 1
  }

  public async getNoticeReceiveLevel() {
    const result = await queryNoticeReceiveLevel()
    if (result.data.code === 100) {
      this.noticeReceiveLevelList = result.data.result
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.ant-layout-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 13px 16px 16px;
}

.sider-menu {
  height: 100px;
  margin-top: 12px;
}

li {
  text-align: center;
}

.ant-menu-vertical > .ant-menu-item {
  color: #909198;
  font-size: 16px;
  font-weight: 400;
  height: 50px;
  letter-spacing: 1px;
  line-height: 50px;
  margin: 0;
  width: 200px;
}

.ant-menu-vertical .ant-menu-item:not(:last-child) {
  border-bottom: 1px solid #e9e9e9;
  margin: 0;
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background: #fff;
  border-left: 4px solid #6973ff;
  color: #373b52;
  font-size: 16px;
  font-weight: 500;
  height: 50px;
  letter-spacing: 1px;
  line-height: 50px;
  padding-left: 12px;
  width: 200px;
}

.ant-menu-item,
.ant-menu-submenu-title {
  transition: none;
}

.ant-divider-horizontal {
  margin: 0;
}

.ant-divider-vertical {
  margin-right: 5%;
}

.message-settings {
  color: #5d637e;
  font-size: 16px;
  font-weight: 500;
  height: 52px;
  letter-spacing: 1px;
  line-height: 52px;
  margin-left: 24px;
  padding-right: 12px;
}

.settings-option-row {
  align-items: center;
  display: flex;
  margin: 12px 24px;
}

.settings-top {
  color: #373b52;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.settings-bottom {
  color: #222432;
  font-size: 12px;
  letter-spacing: 1.12px;
  opacity: 0.5;
}
</style>
